<section class="box clearfix" id="chart-dash-pie-box">
  <header class="panel_header clearfix">
    <h2 class="title left">{{cat.catName | categoryName}} {{'类目销售占比'|translate}}</h2>
    <div class="actions panel_actions right">
      <span class="switch">

        <i class = "fa fa-pie-chart cp" mdTooltip="饼图" mdTooltipPosition="above"  [ngClass] = "{'icon-default': vm.type == 'pie','icon-secondary':vm.type != 'pie'}" (click) = "typeChange('pie')"></i>

        <i class = "fa fa-bar-chart cp" mdTooltip="柱状图" mdTooltipPosition="above"  [ngClass] = "{'icon-default': vm.type == 'bar','icon-secondary':vm.type != 'bar'}" (click) = "typeChange('bar')"></i>

      </span>
    </div>
  </header>
  <div class="content-body">
    <div fxFlexFill echarts [loading]="vm.loading" [data]="vm.data" [type]="vm.type" [title]="vm.fileName" [resize]="true" class="chart-container" style="height: 406px;width: 100%;"></div>
  </div>
</section>
<div style="position: relative;" class="mt10">
  <mat-card>
    <mat-card-title class="clearfix">
      {{cat.catName | categoryName}} {{'类目销售'|translate}}
      <b class="date pl5" *ngIf="vm.data.length>0">{{vm.data[0]['date'] | dateFormat}}</b>
    </mat-card-title>
    <div class="divider"></div>
    <ngx-busy [busy]="offEvent"></ngx-busy>
    <table class="responsive-table bordered highlight">
      <thead>
        <tr>
          <th *ngFor="let column of columns;let $index = index" [innerHTML]="column |translate"> </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let cat of vm.data;let $index = index;">
          <td [matTooltip]="cat.categoryName">{{cat.categoryName |categoryName}}</td>
          <td><span class="tm-yen">¥</span>{{cat.sellMoney | number:'1.0-2'}}</td>
          <td>{{cat.sellAmount | number:'1.0-0'}}</td>
          <td><span class="tm-yen">¥</span>{{cat.monthSellMoney | number:'1.0-2'}}</td>
          <td>{{cat.monthSellAmount | number:'1.0-0'}}</td>
          <td>{{cat.shopNum | number:'1.0-0'}}</td>
          <td>{{cat.productNum | number:'1.0-0'}}</td>
        </tr>
        <tr>
          <td><b>{{'合计'|translate}}</b></td>
          <td><b><span class="tm-yen">¥</span>{{sellResulet.sellMoney | number:'1.0-2'}}</b></td>
          <td><b>{{sellResulet.sellAmount | number:'1.0-0'}}</b></td>
          <td><b><span class="tm-yen">¥</span>{{sellResulet.monthSellMoney | number:'1.0-2'}}</b></td>
          <td><b>{{sellResulet.monthSellAmount | number:'1.0-0'}}</b></td>
          <td></td>
          <td><b>{{sellResulet.productNum | number:'1.0-0'}}</b></td>
        </tr>
      </tbody>
    </table>
  </mat-card>
</div>
